<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片上传</title>
  <style>
    /* 简单样式，优化页面体验 */
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 0 20px; }
    .upload-form { border: 1px solid #ddd; padding: 30px; border-radius: 8px; }
    .file-input { margin: 20px 0; padding: 10px; width: 100%; box-sizing: border-box; }
    .submit-btn { background-color: #4CAF50; color: white; padding: 12px 30px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
    .submit-btn:hover { background-color: #45a049; }
    .link { margin-top: 20px; display: block; color: #2196F3; text-decoration: none; }
  </style>
</head>
<body>
  <div class="upload-form">
    <h2>图片上传管理器</h2>
    <!-- 核心：表单必须指定method="POST"和enctype="multipart/form-data" -->
    <form action="/post/upload" method="POST" enctype="multipart/form-data">
      <!-- 文件输入框：name="image"必须与服务端multer.single('image')的参数一致 -->
      <input type="file" name="image" accept="image/*" class="file-input" required>
      <!-- 提交按钮 -->
      <button type="submit" class="submit-btn">提交上传</button>
    </form>
    <!-- 跳转到图片列表的链接 -->
    <a href="/list" class="link">查看已上传的图片 →</a>
  </div>
</body>
</html>